<template>
  <section class="home">
    <el-card shadow="always" body-style="height:100%" class="bill-card">
      <el-row :gutter="10">
        <el-col :span="1" style="padding-top:10px">
          <span style="width: 100%;font-size:16px;text-align: center">{{ itemC.step }}</span>
          <!-- <el-link disabled>{{index+1}}</el-link> -->
          <!-- <el-input v-model="itemC.step" :disabled="true" placeholder="Step" /> -->
        </el-col>
        <el-col :span="13">
          <el-input v-model="itemC.title" placeholder="Title" />
        </el-col>
        <el-col :span="6">
          <!-- <el-input v-model="itemC.template_id" placeholder="Template Id" style="width:90%"></el-input> -->
          <el-select v-model="itemC.template_id" placeholder="Please Choose" style="width:100%" no-data-text="Can't find record">
            <el-option
              v-for="item in Templatelist"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-col>

        <el-col :span="1">
          <el-link icon="el-icon-caret-top" @click="upstep" />
          <el-link icon="el-icon-caret-bottom" @click="downstep" />
        </el-col>
        <el-col :span="2" style="padding-top:10px;padding-left: 30px;">
          <el-checkbox v-model="itemC.is_chadex" style="" />
        </el-col>
        <el-col :span="1">
          <el-link style="font-size: 20px;margin-top: 8px;" icon="el-icon-delete" @click="deleteP" />
          <!-- <el-button @click="deleteP">删除</el-button> -->
        </el-col>
      </el-row>
    </el-card>
  </section>
</template>
<script>
import { getdictionary } from '@/api/Instruction/joblist/index'
export default {
  props: {
    itemC: {
      type: Object,
      default() {
        return {}
      }
    },
    index: {
      type: Number,
      required: true
    },
    flag: {
      type: Boolean,
      default: false
    },
    people: {
      type: Array,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      sexType: [{ id: '', template_id: '', step: '', title: '', is_require: '', is_chadex: false }],
      choose: 'choose',
      Templatelist: [],
      templateId: ''
    }
  },
  created() {
    this.getTemplatelist()
  },
  methods: {
    deleteP() {
      this.$emit('deleteIndex', this.index)
    },
    // 向上一格
    upstep() {
      const index = this.index
      const nextIndex = Math.max(0, index - 1)

      if (index === nextIndex) return

      this.people[index]['step'] = nextIndex + 1
      this.people[nextIndex]['step'] = index + 1

      this.people.sort(function(a, b) {
        return a['step'] - b['step']
      })
    },
    // 向下一格
    downstep() {
      const index = this.index
      const nextIndex = Math.min(this.people.length - 1, index + 1)

      if (index === nextIndex) return

      this.people[index]['step'] = nextIndex + 1
      this.people[nextIndex]['step'] = index + 1

      this.people.sort(function(a, b) {
        return a['step'] - b['step']
      })
    },
    async getTemplatelist() {
      this.Templatelist = await getdictionary({ dict_type: 'wi_template' })
      if (this.flag && this.Templatelist.length > 0) {
        this.itemC.template_id = this.Templatelist[0].value
        this.templateId = this.Templatelist[0].value
      }
    }
  }
}
</script>
<style>
.bill-card .el-card__body {
  padding: 10px;
}
</style>
